<script lang="ts">

import { ref, onMounted, } from 'vue';
import { articleStore } from '@/stores/article'
import { useRouter, useRoute } from "vue-router"
import { showToast } from 'vant';
import { footPrintStore, followDesignerStore } from '../stores/userInfo'
import { toRaw } from 'vue';
import { discoverArticleStore } from '@/stores/discoverArticle'
import { reviewStore } from '../stores/review'
import { informationStore } from '../stores/information'

export default {
    components: {
    },
    setup() {

        let articleDetail: any = ref(null)
        let router: any = useRouter();
        let route: any = useRoute();
        console.log(route);

        let informa = informationStore().$state.information;

        let articleId: string = route.query.pid//url的pid
        let footPrint: Array<any> = footPrintStore().$state.footPrint//拿到足迹列表，然后看看当前的在不在里面，在的话就不推进去，不在的话，推进去列表里面
        // if (footPrint.indexOf(articleId) == -1) {
        //     footPrint.unshift(articleId)
        // }
        let index = articleStore().$state.article.findIndex((item: any) => {
            return articleId == item.id
        })
        let current = ref(0);
        let articleList: any = articleStore().$state.article
        let onChange = function (index: number) {
            current.value = index;
        }
        let commentContent: any = ref()
        let comment = () => {
            let token = JSON.parse(window.localStorage.getItem('token') || '')
            if (token == undefined) {
                showToast('请登录再留言')
            }
            else {
                showToast('留言成功');
                let user: any = {}
                user[token.userName] = commentContent.value
                console.log(articleDetail[index]);

                articleList[index].comment.unshift(user)
                commentContent.value = ''
                let review = {
                    revie: user[token.userName],
                    pid: articleDetail.value.id,
                    pic: articleDetail.value.picUrl,
                }
                let reSto: any = reviewStore().$state.review;
                reSto.push(review);
            }
        }

        let designerName = ref(null)
        let discoverarticle: any = discoverArticleStore().$state.discoverarticle
        // console.log(discoverarticle);

        let follow = ref(false)
        const following = () => {
            console.log(articleDetail.value);
            
            let followed: any = toRaw(followDesignerStore().$state.followDesignerStore);
            let followObj = {
                designerName: articleDetail.value.caseDetail.designerName,
                pic: articleDetail.value.caseDetail.designerPicUrl,
                id: articleDetail.value.caseDetail.designerId,
                belongTo: articleDetail.value.caseDetail.belongToShop
            }
            // followDesignerStore().follow(followObj)

            if (followed.length == 0) {
                followed.push(followObj);
                console.log(111);

                follow.value = true
            } else {
                let append = followed.every((item: any) => {
                    return designerName !== item.designerName;
                })
                if (append) {
                    followDesignerStore().$state.followDesignerStore.push(followObj)
                    follow.value = true
                    return
                } else {
                    let index = followed.findIndex((item: any) => {
                        return designerName == item.designerName
                    })
                    followDesignerStore().$state.followDesignerStore.splice(index, 1)
                    follow.value = false
                }

            }
        }

        const showShare = ref(false);
        const options = [
            [
                { name: '微信', icon: 'wechat' },
                { name: '朋友圈', icon: 'wechat-moments' },
                { name: '微博', icon: 'weibo' },
                { name: 'QQ', icon: 'qq' },
            ],
            [
                { name: '复制链接', icon: 'link' },
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
                { name: '小程序码', icon: 'weapp-qrcode' },
            ],
        ];
        const goPage = () => {
            router.back();
        }
        onMounted(() => {
            articleList.forEach((item: any) => {//articleList文章列表对象
                console.log(articleId);

                if (item.id == articleId) {
                    articleDetail.value = item
                    let some = footPrint.some((item) => {
                        return item.id == articleId;
                    })
                    if (!some) {
                        let footp: any = footPrintStore().$state.footPrint;
                        footp.push(toRaw(articleDetail.value));
                    }
                }
            })
            designerName = articleDetail.value.caseDetail.designerName

            let followed: any = toRaw(followDesignerStore().$state.followDesignerStore)
            let res = followed.some((item: any) => {
                return item.designerName == designerName
            })
            follow.value = res
            console.log(res);
        })
        return {
            commentContent,
            comment,
            options,
            showShare,
            current,
            onChange,
            goPage,
            articleList,
            articleDetail,
            follow,
            following, 
            discoverarticle,
            informa
        };
    },
};
</script>

<template>
    <!-- 详情页 -->
    <div class="Detail" v-if="articleDetail">
        <div class="detail_title">
            <div class="detail_title_left">
                <span @click="goPage()">
                    <img src="../assets/images/Detai/triver_miniapp_bar_return_dark.png">
                </span>
                <img :src="articleDetail.caseDetail.designerPicUrl">
                <h3>{{ articleDetail.caseDetail.designerName }}</h3>
            </div>
            <div class="detail_title_right">
                <span v-show="!follow" @click="following">关注</span>
                <span class="notfollow" v-show="follow" @click="following">不再关注</span>
                <img src="../assets/images/Detai/ich_share_b.png" @click="showShare = true">
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="detail_slideshow">
            <van-swipe @change="onChange">
                <van-swipe-item v-for="(item, index) in articleDetail.caseDetail.spaceDetails" :key="index">
                    <img :src="item.picUrl">
                </van-swipe-item>
                <template #indicator>
                    <div class="custom-indicator">{{ current + 1 }}/{{ articleDetail.caseDetail.spaceDetails.length }}</div>
                </template>
            </van-swipe>
            <!-- <div class="consult">
                <img src="../assets/images/Detai/icon_note_consult.png">
                立即执行
            </div> -->
        </div>
        <!-- 内容 -->
        <div class="detail_txt">
            <h3>{{ articleDetail.caseName }}</h3>
            <p>{{ articleDetail.caseDetail.designNote }}</p>
            <span>发布于2022.08.16 广州</span>
            <hr>
        </div>
        <!-- 评论 -->
        <div class="detail_discuss">
            <h3>评论</h3>
            <div class="inp">
                <img :src="informa.toux.content || informa.toux">
                <input type="text" placeholder="说点什么吧" @keydown.enter="comment" v-model="commentContent">
            </div>
            <div class="detail_list">
                <div class="detail_item" v-for="(item, index) in articleDetail.comment" :key="index">
                    <div class="detail_item_top">
                        <div class="detail_item_left">
                            <img src="../assets/images/Detai/Individual-bs.jpg">
                            <div class="detail_message">
                                <span>{{ Object.keys(item)[0] }}</span>
                            </div>
                        </div>
                        <div class="detail_item_right">
                            <img src="../assets/images/Detai/icon_like_n.png">
                            <img src="../assets/images/Detai/icon_like_s.png">
                            <p></p>
                        </div>
                    </div>
                    <p>{{ Object.values(item)[0] }}</p>
                </div>

            </div>
        </div>

        <div class="detail_end">--<i>.</i>END<i>.</i>--</div>


        <!-- 推荐 -->
        <div class="recommend">
            <h3>更多推荐</h3>
            <div class="list" v-if="discoverarticle">
                <div class="item" v-for="item in discoverarticle.cell_list">
                    <img :src="item.cover_image_infos[0].url">
                    <p class="txt-cut">{{ item.abstract }}</p>
                    <div class="recommend_meage">
                        <div class="recommend_meage_left">
                            <img :src="item.user_info.avatar_url">
                            <div class="recommend_meage_name">{{ item.user_info.name }}</div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
    </div>
</template>

<style lang="scss" scoped>
.particulars-detail-popup {
    background: rgba(0, 0, 0, 0.7) !important;
}

.detail_title {
    width: 100%;
    height: 48px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;

    .detail_title_left {
        display: flex;
        align-items: center;

        span {
            width: 25px;
            height: 30px;
            margin-right: 10px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        img {
            width: 30px;
            height: 30px;
            display: block;
            border-radius: 50%;
        }

        h3 {
            font-size: 14px;
            font-weight: 500;
            margin-left: 10px;
        }
    }

    .detail_title_right {
        display: flex;
        align-items: center;

        span {
            font-size: 12px;
            color: #fff;
            padding: 5px 10px;
            border-radius: 20px;
            background-color: #12c1b6;

        }

        .notfollow {
            background-color: #898989;
        }

        img {
            width: 30px;
            height: 30px;
            display: block;
            margin-left: 20px;
        }
    }
}

.detail_slideshow {
    position: relative;

    .van-swipe {
        width: 100%;
        height: 450px;
        background-color: skyblue;

        img {
            width: 100%;
            // height: 100%;
            display: block;
        }
    }

    .custom-indicator {
        position: absolute;
        right: 5px;
        top: 5px;
        border-radius: 20px;
        padding: 2px 5px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.1);
    }

    .consult {
        position: absolute;
        left: 12px;
        bottom: 20px;
        font-size: 14px;
        padding: 5px;
        background-color: #ffffff99;
        border-radius: 20px;

        img {
            width: 21px;
            height: 21px;
            display: inline-block;
            vertical-align: -5px;
        }
    }
}

.detail_txt {
    margin-top: 15px;
    padding: 0px 12px;

    h3 {
        font-size: 20px;
        font-weight: 600;
    }

    p {
        font-size: 16px;
        word-wrap: break-word;
    }

    span {
        display: block;
        font-size: 14px;
        color: #ccc;
        margin: 20px 0px;
    }
}

.detail_discuss {
    margin-top: 20px;
    padding: 0px 12px;

    h3 {
        font-weight: 600;
        margin-bottom: 20px;
    }

    .inp {
        display: flex;
        align-items: center;

        img {
            width: 30px;
            height: 30px;
            display: block;
            border-radius: 50%;
        }

        input {
            flex: 1;
            margin-left: 15px;
            padding: 6px 15px;
            border-radius: 20px;
            background-color: #e3e3e3;
            color: #8b8b8b;
            border: 0;
        }
    }

    .detail_list {
        margin-top: 20px;
    }

    .detail_item {
        padding-top: 10px;
        margin-bottom: 15px;

        &>p {
            margin-top: 10px;
            margin-left: 40px;
            word-wrap: break-word;
        }
    }

    .detail_item_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .detail_item_left {
        display: flex;

        img {
            width: 30px;
            height: 30px;
            display: block;
            border-radius: 50%;
            margin-right: 10px;
        }
    }

    .detail_message {

        p,
        span {
            font-size: 12px;
            color: #898989;
        }
    }

    .detail_item_right {
        &>img {
            width: 30px;
            height: 30px;
            display: block;
            position: absolute;
            top: 3px;
            right: 10px;
        }
    }
}

.detail_end {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #898989;
    font-size: 12px;
    padding-bottom: 45px;
    padding-top: 20px;
    background-color: #f5f5f5;

    i {
        margin: 0px 6px;
        margin-top: -6px;
    }
}

// 推荐
.recommend {
    padding: 0px 5px;
    padding-top: 10px;
    background-color: #f5f5f5;

    h3 {
        color: #898989;
        font-size: 15px;
        margin-bottom: 10px;
    }
}

.list {
    column-count: 2;
    column-gap: 10px;
    column-width: 100%;

    .item {
        width: 100%;
        break-inside: avoid;

        img {
            width: 100%;
            height: auto;
            display: block;
        }

        p {
            margin-top: 5px;
            padding: 0px 5px;
            word-wrap: break-word;
            font-size: 14px;
            font-weight: 600;
        }
    }
}

.recommend_meage {
    margin-top: 5px;
    display: flex;
    justify-content: space-between;

    .recommend_meage_left {
        display: flex;

        img {
            width: 22px;
            height: 22px;
            display: block;
            border-radius: 50%;
            margin-right: 5px;
        }

        .recommend_meage_name {
            font-size: 12px;
            color: #444;
            max-width: 60px;
        }
    }

    .recommend_meage_right {
        position: relative;

        img {
            margin-right: 30px;
            width: 22px;
            height: 22px;
            display: block;
            position: absolute;
            top: 1px;
            right: 0;
        }

        p {
            font-size: 14px;
            color: #444;
            font-weight: normal;
        }
    }
}
</style>